<!DOCTYPE HTML>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />

	<head>
		<title>html5酒店预订日期选择手机日历</title>
		<script type="text/javascript" src="../mui/js/jquery.min.js"></script>
		<script type="text/javascript" src="../mui/js/dateRange.js"></script>
		<link rel="stylesheet" type="text/css" href="../mui/css/dateRange.css" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style>
			body {
				line-height: 18px;
			}
			/* 头部--开始 */
			
			.hotel-header,
			.mui-title,
			.hotel-header .mui-icon {
				font-size: 0.9rem;
				color: #e61874;
				background: #fff;
			}
			
			.mui-bar-nav {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			/* 头部--结束 */
			/* 重写插件样式--开始 */
			
			.ta_calendar {
				z-index: 0;
			}
			
			.ta_calendar table {
				background-color: #f0f0f0;
			}
			
			.ta_calendar table caption {
				box-shadow: none;
				background-color: #fff;
			}
			
			.ta_calendar table thead tr {
				background: #f0f0f0;
				border: none;
			}
			
			.ta_calendar table tbody td {
				background: #f0f0f0;
				border: none;
			}
			
			.ta_calendar_cont .i_pre,
			.ta_calendar_cont .i_next {
				position: fixed;
				top: 68px;
			}
			/*.ta_calendar_cont .i_pre{
				left: 1.65rem;
			}
			
			.ta_calendar_cont .i_next {
				right: 1.65rem;
			}*/
			
			.ta_calendar td.today {
				color: #fff;
				background: url(../styles/images/calendar/panel_circular.png@2x.png) no-repeat;
				background-size: 25px 25px;
				background-position: 49%;
			}
			
			.ta_calendar td.first {
				color: #fff;
				background: url(../styles/images/calendar/panel_circular.png@2x.png) no-repeat;
				background-size: 25px 25px;
				background-position: 49%;
			}
			
			.ta_calendar td.last {
				color: #fff;
				background: url(../styles/images/calendar/panel_circular.png@2x.png) no-repeat;
				background-size: 25px 25px;
				background-position: 49%;
			}
			
			.ta_calendar td.ta_dateRangeSelected {
				/*background: rgba(230, 24, 116, 0.1);*/
				font-weight: bold;
				color: #e61874;
			}
			
			/*.ta_calendar td.first,
			.ta_calendar td.today,
			.ta_calendar td.last {
				background: transparent;
			}*/
			
			.ta_calendar td.first:after,
			.ta_calendar td.today:after,
			.ta_calendar td.last:after {
				position: absolute;
				color: #e61874;
				bottom: -10px;
				left: 50%;
				margin-left: -12px;
				z-index: 10;
			}
			
			.i_pre {
				width: 33px;
				height: 33px;
				background: url(../styles/images/btn_left_nor.png@2x.png) no-repeat;
				background-size: 33px 33px;
			}
			
			.i_next {
				width: 33px;
				height: 33px;
				background: url(../styles/images/btn_right_nor.png@2x.png) no-repeat;
				background-size: 33px 33px;
			}
			/* 重写插件样式--结束 */
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back();"></a>
			<h1 class="mui-title">选择日期</h1>
		</header>
		<div class="mui-content">
			<div class="ta_date" style="margin-top: 400px;">
				<!--id="div_date1"-->
				<!--<span class="date_title" id="date1" style=""></span>
				<button id="btn">确认 </button>-->
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'index.html',
					url: 'index.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});

			//点击确定按钮
			var indexPage = null;
			var depDate;
			var leaveDate;
			// localStorage.setItem('depDate', depDate);
			// localStorage.setItem('endDate', endDate);

			var dateRange1 = new pickerDateRange('date1', {
				aRecent90Days: 'aRecent90Days', //最近90天
				// isTodayValid : true,
				// startDate: '2017-01-01',
				// endDate: '2017-04-01',
				needCompare: false,
				stopToday: true,
				isTodayValid: true,
				defaultText: ' 离开 ',
				autoSubmit: true, // 没有确定，取消按钮，直接提交 
				inputTrigger: 'input_trigger1',
				theme: 'ta',
				success: function(obj) {
					console.log("在这里");
					console.log("开始时间 " + startDate.value + " 结束时间 " + endDate.value);
					depDate = startDate.value;
					leaveDate = endDate.value;
					//获得详情页面
					if(!indexPage) {
						indexPage = plus.webview.getWebviewById('index.html');
					}
					//触发详情页面的newsId事件
					mui.fire(indexPage, 'dataId', {
						depDate: depDate,
						endDate: leaveDate
					});
					//打开详情页面          
					mui.openWindow({
						id: 'index.html'
					});
					return true;
				},
			});
		</script>
	</body>

</html>